<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
    <title>jQuery对象的扩展</title>
    <script src="./js/jquery-3.5.1.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        $(function () {
            $.fn.extend({
                id: 10,
                show() {
                    console.log('这是对jQuery原型对象的扩展函数show')
                },
            })
            $('#app').show()
            console.log('id=' + $('#app').id)

            //对jQuery对象本身的扩展，对象的深度合并
            let object = $.extend({
                age: 20
            }, {
                id: '1',
                names: 'tom',
                show() {
                    console.log(`{id:${this.id},names:${this.names},age:${this.age}}`)
                },
            })
            console.log(object.show())
        })
    </script>
</body>

</html>
<!--
  $.fn.extend({})和$.extend({})的区别
  1、$.fn.extend({})是对jquer对象原型的扩展，可以使用实例对象调用扩展的内容
  2、$.extend({})是对jquery对象本身也就是对$的扩展
  3、$.extend({},{},{},{}...)是用来把所有对象属性合并到第一个对象中，并返回
 -->